<template>
	<view class="menu_container hideToShow">
		<!-- 头部轮播banner -->
		<swiper class="swiper_wrap" :autoplay="true" :circular="true" :interval="3000" :duration="1000">
			<swiper-item v-for="(item, index) in banner" :key="index">
				<view class="menu_banner"><image :src="item.banner" mode="aspectFill"></image></view>
			</swiper-item>
		</swiper>
		<view class="menu_list" v-for="item in menuList" :key="item.id">
			<view class="menu_list_title">
				<text>{{ item.title }}</text>
			</view>
			<view class="menu_context">
				<view class="menu_context_item" v-for="(cell, idx) in item.list" :key="idx" @tap="routerJump(cell)">
					<image :src="cell.icon" mode="aspectFill"></image>
					<text class="text-omit">{{ cell.name }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			banner: [],
			menuList: []
		};
	},
	onLoad() {
		this.getBanner();
		this.getList();
	},
	methods: {
		async getBanner() {
			await uniCloud.callFunction({
				name: 'banner',
				success: res => {
					let bannerImg = res.result.data;
					this.banner = bannerImg;
				}
			});
		},
		// 获取域服务菜单
		async getList() {
			const res = await uniCloud.callFunction({
				name: 'menu'
			});
			const data = res.result;
			if (data.success && data.data) {
				this.$set(this, 'menuList', data.data);
			} else this.$until.showToast(data.message);
		},
		routerJump(item) {
			if (!item.status) return this.$until.showToast('敬请期待');
			if (!item.url) return this.$until.showToast('敬请期待');
			window.location.href = item.url;
		}
	}
};
</script>

<style lang="less" scoped>
.menu_container {
	width: 100%;
	overflow: hidden;
	min-height: calc(100vh - 100rpx);

	.swiper_wrap {
		margin-bottom: 30rpx;

		.menu_banner {
			width: 100%;
			box-sizing: border-box;

			> image {
				width: 100%;
				height: 300rpx;
			}
		}
	}

	.menu_list {
		width: 92%;
		margin: auto;
		overflow: hidden;
		border-radius: 24rpx;
		margin-bottom: 35rpx;
		padding: 30rpx 24rpx;
		box-sizing: border-box;
		background-color: #ffffff;
		box-shadow: 0 0 20rpx rgba(185, 185, 185, 0.6);

		.menu_list_title {
			display: flex;
			align-items: center;
			padding-bottom: 25rpx;
			border-bottom: 1rpx solid #f1f1f1;

			> text {
				font-size: 32rpx;
				font-weight: bold;
				padding-left: 30rpx;
				border-left: 6rpx solid #409eff;
			}
		}

		.menu_context {
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			align-items: center;

			.menu_context_item {
				width: 25%;
				display: flex;
				margin: 32rpx 0;
				align-items: center;
				flex-direction: column;
				justify-content: center;
				box-sizing: border-box;

				> image {
					width: 80rpx;
					height: 80rpx;
					object-fit: cover;
					border-radius: 50%;
					margin-bottom: 15rpx;
				}

				> text {
					font-size: 26rpx;
				}
			}
		}
	}
}
</style>
